<template>
  <div>
    <b-jumbotron>
      <template slot="header">
      </template>
      <template slot="lead">
        其他与反馈
      </template>
      <hr class="my-4">
      <p>
        你可以在通过常见问题来查看你遇见的问题，如果没有对应的情况，请直接提交你遇到的问题.
      </p>
      <hr class="my-4">
      <p>
        如果你觉得问题比较复杂，难以描述，你可以直接联系我，我的邮箱是: 1309014381@qq.com(或者是z1309014381@gmail.com)
      </p>
      <hr class="my-4">
      <p>
        也可在qq中留言,qq号码为1309014381
      </p>
      <b-btn variant="primary" style="margin-right:10px;" @click="$refs.TroubleFeedbackModal.show()">网站出现了问题？问题反馈</b-btn>
    </b-jumbotron>

    <!-- 问题反馈 Modal -->
    <b-modal id="modal-center" ref="TroubleFeedbackModal" ok-only centered title="问题反馈" size="lg">
      <b-container fluid>
        <b-form-textarea id="textarea1" autocomplete v-model="trouble.content" placeholder="告诉我你遇到的问题或者是建议" :rows="3" :max-rows="6">
        </b-form-textarea>
        <b-collapse id="collapse1" class="mt-2">
          <b-card>
            <upload-image url="" button_html="点击空白处添加图片" :resize_enabled="true">
            </upload-image>
          </b-card>
        </b-collapse>
      </b-container>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-left" v-b-toggle.collapse1 variant="primary">添加图片</b-btn>
        <b-btn size="sm" class="float-right" style="margin-left:10px;" variant="primary">提交</b-btn>
        <b-btn size="sm" class="float-right" variant="primary" @click="$refs.TroubleFeedbackModal.hide()">
          返回
        </b-btn>
      </div>
    </b-modal>
  </div>
</template>

<script>
import UploadImage from "vue-upload-image";
export default {
  name: "Feedback",
  components: {
    "upload-image": UploadImage
  },
  data() {
    return {
      trouble: {
        content: ""
      }
    };
  },
  methods: {}
};
</script>
<style lang="scss">
.form-control {
  border: 1px solid #e9ebec;
}
.displaynone {
  display: none;
}
</style>
